<template>
  <div class="w-full h-full bg-grey">
    <van-nav-bar class="bg-red text-white" title="订单详情" left-arrow @click-left="$router.go(-1)"></van-nav-bar>
    <div class="m-t-10 bg-white p-t-5 p-b-15 p-h-10">
      <div class="flex j-between a-center m-t-10">
        <img class="max-w-200 w-60 h-60 b-r-4" src="@/assets/images/merchant.jpg" alt="商家名称" />
        <div class="relative flex-1 m-l-10 text-content fs-14">
          <p>海信（Hisense）H55E75A 55英寸 4K HDR 超薄全面屏电视</p>
          <p class="text-blue fs-12 m-t-5">已下单</p>
        </div>
      </div>
    </div>
    <div class="bg-grey p-10">
      <!-- 商品价格 -->
      <div class="bg-white">
        <p class="icon-title flex j-between p-10 b-b fs-14 text-content">商品价格</p>
        <div class="text-content fs-12 p-10 b-b">
          <p class="flex j-between p-v-5">
            <span>三只松鼠大礼包</span>
            <span class="text-red fs-16">¥27.8</span>
          </p>
          <p>x 1</p>
        </div>
        <div class="text-content fs-12 p-10 b-b">
          <p class="flex j-between p-v-5">
            <span>优惠量</span>
            <span class="text-red">¥2</span>
          </p>
          <p class="flex j-between p-v-5">
            <span>门市价</span>
            <span>¥29.8</span>
          </p>
          <p class="flex j-between p-v-5">
            <span>消费方式</span>
            <span>到店</span>
          </p>
        </div>
        <div class="text-content fs-12 p-10 b-b flex j-end">
          <div class>
            合计
            <span class="fs-16 text-red m-l-10">¥27.8</span>
          </div>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="bg-white m-t-10">
        <p class="icon-title flex j-between p-10 b-b fs-14 text-content">订单信息</p>
        <div class="text-content fs-12 p-10 b-b">
          <p class="flex p-v-5">
            <span class="d-block w-100">订单号:</span>
            <span>4102131312313</span>
          </p>
          <p class="flex p-v-5">
            <span class="d-block w-100">手机号:</span>
            <span>156****1882</span>
          </p>
          <p class="flex p-v-5">
            <span class="d-block w-100">消费时间:</span>
            <span>2019-08-12 23:55</span>
          </p>
          <p class="flex p-v-5">
            <span class="d-block w-100">付款时间:</span>
            <span>2019-08-12 12:55</span>
          </p>
          <p class="flex p-v-5">
            <span class="d-block w-100">下单时间:</span>
            <span>2019-08-12 12:55</span>
          </p>
          <p class="flex p-v-5">
            <span class="d-block w-100">数量:</span>
            <span>1</span>
          </p>
          <p class="flex p-v-5">
            <span class="d-block w-100">总价:</span>
            <span>¥88</span>
          </p>
          <p class="flex p-v-5">
            <span class="d-block w-100">实付:</span>
            <span>¥78</span>
          </p>
        </div>
      </div>
      <van-button to="/order" class="m-t-20 w-full" type="danger">返回会员预定页</van-button>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
$lightred: #fa6b4f;
.bg-lightred {
  background: $lightred;
}
.rotate-15 {
  /deep/ svg {
    transform: rotate(15deg);
  }
}
.icon-title {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 3px;
    height: 15px;
    background: #fa6b4f;
  }
}
.van-nav-bar .van-icon {
  color: #fff !important;
}
.van-nav-bar__title {
  color: #fff !important;
}
.van-hairline--bottom::after {
  border: none;
}
</style>
